<%--
  Created by IntelliJ IDEA.
  User: 86183
  Date: 2022/5/2
  Time: 20:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="#"/>
    <title>注册</title>
    <style>
        body{
            color: white;
            background-color: black;
        }
        #checkName{
            width: 200px;
            height: 5px;
        }
        #checkPassword{
            width: 200px;
            height: 5px;
        }
        #checkNewPassword{
            width: 200px;
            height: 5px;
        }
    </style>
</head>
    <body>
        请输入您的昵称:<input type="text" maxlength="10" name="userName" id="userName"/>
        <br>
        <div id="checkName" style="color: red; font-size:4px" ></div>
        <br>
        请输入您的密码:<input type="password" maxlength="10" name="password" id="password">
        <br>
        <div id="checkPassword" style="color: red; font-size:4px"></div>
        <br>
        请再次输入您的密码:<input type="password" maxlength="10" name="againPassword" id="againPassword">
        <br>
        <div id="checkNewPassword" style="color: red; font-size:4px"></div>
        <br>
        <button id="register" >注册</button>
    </body>
    <script type="application/javascript">
        function setCookie(name,value,exdays) {
            let date = new Date();
            date.setTime(date.getTime() + (exdays*24*60*60*1000));
            let expires = "expires=" + date.toUTCString();
            document.cookie = name + "=" + value + "; " + expires;
        }
        function getCookie(name) {
            if (document.cookie.length > 0) {
                let start = document.cookie.indexOf(name + "=");
                if (start != -1) {
                    start = start + name.length + 1;
                    let end = document.cookie.indexOf(";", start);
                    if (end == -1) end = document.cookie.length;
                    return decodeURI(document.cookie.substring(start, end));
                }
            }
            return null;
        }
        function Register(){
            let userName = document.getElementById("userName").value;
            let password = document.getElementById("password").value;
            if(userName==''){
                alert("信息不完整!");
                return;
            }
            if(password==''){
                alert("信息不完整!");
                return;
            }
            let User={
                "name": userName,
                "password": password,
                "state": "活跃",
                "method":"registerFinally"
            }
            let xhr=new XMLHttpRequest();
            xhr.open("post","http://localhost:80/registerFinally",true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send("json="+JSON.stringify(User));
            console.log("before:user="+JSON.stringify(User));
            xhr.onreadystatechange=function (){
                if(xhr.status==200 && xhr.readyState==4){
                    let json=xhr.response;
                    console.log(json)
                    let data=JSON.parse(json)
                    console.log(data)
                    if(data["code"]==200){
                        alert(data["state"])
                        let user=JSON.parse(data.data);
                        console.log(user.id);
                        setCookie("id",user.id,7);
                        setCookie("name",userName,7);
                        window.location="index.jsp";
                    }

                }
            }

        }
        function checkPassword(){
            let password = document.getElementById("password").value;
            let againPassword = document.getElementById("againPassword").value;
            if(password!==againPassword){
                document.getElementById("checkNewPassword").innerHTML="<text>&nbsp;两次密码输入不一致!</text>"
            }
        }
        document.getElementById("userName").onblur = function (){
            let userName = document.getElementById("userName").value;
            if(userName.trim() == ""){
                document.getElementById("checkName").innerHTML="<text>&nbsp;昵称必须在1~10个字符以内!</text>";
            }else{
                let xhr=new XMLHttpRequest();
                xhr.open("post","http://localhost:80/register",true);
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.responseType='json';
                xhr.send("userName="+JSON.stringify(userName));
                xhr.onreadystatechange=function(){;
                    if(xhr.status==200 && xhr.readyState==4){
                        let data = xhr.response;
                        console.log(data);
                        if(data["code"]==404){
                            document.getElementById("checkName").innerHTML=
                                "<text>"+data.state+"</text>"
                        }
                    }
                }
            }
        }
        document.getElementById("userName").onfocus=function(){
            document.getElementById("checkName").innerHTML='';
        }
        document.getElementById("password").onblur=function(){
            let password = document.getElementById("password").value;
            if(password.trim() == ""){
                document.getElementById("checkPassword").innerHTML="<text>&nbsp;密码必须在1-10个字符以内!</text>";
                return;
            }
            checkPassword();
        }
        document.getElementById("password").onfocus=function(){
            document.getElementById("checkPassword").innerHTML='';
            document.getElementById("checkNewPassword").innerHTML='';
        }
        document.getElementById("againPassword").onblur=function (){
            checkPassword();
        }
        document.getElementById("againPassword").onfocus=function(){
            document.getElementById("checkNewPassword").innerHTML='';
        }
        document.getElementById("register").onclick=function (){
            let checkName=document.getElementById("checkName").innerText;
            console.log(checkName);
            let checkPassword=document.getElementById("checkPassword").innerText;
            console.log(checkPassword);
            let checkNewPassword=document.getElementById("checkNewPassword").innerText;
            console.log(checkNewPassword);
            if(checkName=='' &&checkPassword==''&& checkNewPassword==''){
                console.log("可以提交啦");
                Register();
            }
        }
    </script>
</html>
